<nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
        Syntax
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/helpers/">
        Helpers
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
        Responsive helpers
      </a>
      <a class="navbar-item is-tab {% if page.doc-subtab == 'typography-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/typography-helpers/">
        Typography helpers
        <span class="tag is-success" style="margin-left: 1em;">
          New!
        </span>
      </a>
    </div>
  </div>
</nav>
